<template>
    <div class="swiper-wrap">
        <swiper :options="swiperOption" class="swiper">
            <!-- slides -->
            <template v-for="item of swiperList">
                <swiper-slide :key="item.imgUrl" class="swiper-item">
                    <img :src="item.imgUrl" alt="">
                </swiper-slide>
            </template>
            <!-- Optional controls -->
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
  export default {
    name: 'carrousel',
    data () {
      return {
        // swiper参数配置
        swiperOption: {
          // 分页小圆点 : 分页的元素的class类名
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
          loop: true, //   循环轮播
          autoplay: {
            delay: 1000, // 延时
          },
          
        },
        swiperList: [
          {
            imgUrl: '/images/01.jpg',
          },
          {
            imgUrl: '/images/02.jpg',
          }
          ,
          {
            imgUrl: '/images/03.jpg',
          },
          {
            imgUrl: '/images/04.jpg',
          },
        ],
      }
    },
    computed: {
      swiper () {
        return this.$refs.mySwiper.swiper
      },
    },
    
    methods: {
      callback () {
        console.log(arguments)
      },
    },
    
  }
</script>

<style lang="stylus" scoped>
    .swiper-wrap >>> {
        .swiper-pagination-bullet-active {
            background-color: #fff
        }
     
    }
    
    .swiper-wrap {
        overflow: hidden;
        height: 0;
        width: 100%;
        padding-bottom: (200 / 750 * 100) %
        
        .swiper {
            img {
                width: 100%;
            }
        }
     
    }

</style>